<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.mytrip.model.*" import="java.util.List"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>出发吧</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/common/include_js.jsp" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/front/css/css.css" />
</head>
<body>
<div id="wrap">
  <jsp:include page="include/top.jsp">
  	<jsp:param name="t" value="3" />
  </jsp:include>

  <div id="main">
  	<div id="flight_left">
  	<%
  		FlightCity fromCity = (FlightCity)request.getAttribute("fromCity");
  		FlightCity toCity = (FlightCity)request.getAttribute("toCity");
  	%>
      <div class="filter">
        <div class="prog" id="progTip"><em><%=fromCity.getCityName()%>,<%=fromCity.getAirportName()%>(<%=fromCity.getCity3code()%>) ~ <%=toCity.getCityName()%>,<%=toCity.getAirportName()%>(<%=toCity.getCity3code()%>)</em>&nbsp;&nbsp;&nbsp;&nbsp;${fromDate}
        <%
        String backDate=(String)request.getAttribute("backDate");
        if(backDate!=null&&!"".equals(backDate)){
        %>
        &nbsp;&nbsp;<input title="返程" type="button" class="flightsearch" value="返 程" onclick="javascript:window.open('<%=request.getContextPath() %>/front/order!flightSearch.action?fromCity=<%=toCity.getCity3code()%>&toCity=<%=fromCity.getCity3code()%>&fromDate=<%=backDate%>&isTj=${isTj}&viaPort=${viaPort}','_blank');" />
        <%
        }
        %>
        </div>
        <div id="hdivfilterPanel" class="fp" style="display: block;">
          <div style="display: block;" class="more" id="moreFilterXI1"></div>
          <div class="item" style="display: block;"><strong>起飞时间</strong><span>
            <input type="checkbox" name="filterTime" value="0,10" onclick="javascript:filterTime();" checked="checked">
            <label for="chkXI11"><span>上午</span></label>
            </span><span>
            <input type="checkbox" name="filterTime" value="11,12" onclick="javascript:filterTime();" checked="checked">
            <label for="chkXI178"><span>中午</span></label>
            </span><span>
            <input type="checkbox" name="filterTime" value="13,17" onclick="javascript:filterTime();" checked="checked">
            <label for="chkXI18"><span>下午</span></label>
            </span><span>
            <input type="checkbox" name="filterTime" value="18,23" onclick="javascript:filterTime();" checked="checked">
            <label for="chkXI20"><span>晚上</span></label>
            </span></div>
          <div class="clr"></div>
        </div>
      </div>
      <div class="ftbl">
        <ul class="ftbl_hd">
          <li class="c1"><strong>航空公司/航班</strong><br>
            机型</li>
          <li class="c2"><strong>起降时间<span class="sortNo"></span></strong></li>
          <li class="c3"><strong>机场</strong></li>
     
          <li class="c6"><strong>最低报价<span class="sortNo"></span></strong></li>
        </ul>
        <div class="hisPnl" id="Lw_historyprice"></div>
        <div class="upTimePanel" id="Lw_recommed"></div>
        <a id="resultAnchor"></a>
        <div class="rsl" id="hdivResultPanel">
          
        </div>
      </div>
    </div>
    
    <jsp:include page="include/flight-right.jsp" />
  </div>
  
  <jsp:include page="include/bottom.jsp" />
</div>

<table class="ftbl_item" id="ftbl_item_tpl" style="display:none;">
  <tbody>
    <tr>
      <td class="m1" style="width:535px;">
        <ul>
          <li class="c2">
            <div class="name">上海航空<br/><strong>FM9179</strong></div>波音737(中)
          </li>
          <li class="c3">
            <div class="time"><strong class="time1">15:50</strong><br/><strong class="time2">18:20</strong></div>
          </li>
          <li class="c4">浦东机场T2<br/>龙嘉机场</li>
        </ul>
      </td>
      <td class="m4" style="width:120px;"><span class="pr">¥<b>1392</b></span><br/><span class="dc">8.7折</span></td>
      <td class="m2"></td>
      <td class="m3"><input title="预订" type="button" class="flightsearch" value="预 订" ref=""/></td>
    </tr>
  </tbody>
</table>

<div id="cw_item_tpl" class="pop dialog" style="height:100px;width:340px;display:none;">
<div class="popHeader"><h1>所有价格</h1><a href="javascript:void(0);" onclick="javascript:hiddenPopDiv();"><span class="close">关闭</span></a></div>
<div class="popInfo"><table cellpadding="0" cellspacing="0" style="width:300px;margin:20px;"></table></div>
</div>

<div id="orderInfo" class="pop dialog" style="height:660px;width:340px;display:none;">
<div class="popHeader"><h1>生成订单</h1><a href="javascript:void(0);" onclick="javascript:hiddenPopDiv();"><span class="close">关闭</span></a></div>
<div class="popInfo">
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:10px 20px 0 20px;">
		<tr><td style="width:100px;">出发城市三字码</td><td class="o1" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">到达城市三字码</td><td class="o2" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">起飞日期/时间</td><td class="o3" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">到达日期/时间</td><td class="o4" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">航空公司/航班号</td><td class="o5" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">舱位</td><td class="o6" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">票价</td><td class="o7" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">机建</td><td class="o8" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">燃油</td><td class="o9" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">总价</td><td class="o10" style="width:200px;"></td></tr>
	</table><br/>
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:0 20px 0px 20px;">
		<tr><td colspan="2">乘机人</td></tr>
		<tr><td style="width:100px;">姓名</td><td style="width:200px;"><input type="text" class="o11" /></td></tr>
		<tr><td style="width:100px;">用户类型</td><td style="width:200px;"><input type="radio" name="cret" value="1"/>成人&nbsp;<input type="radio" name="cret" value="2"/>儿童</td></tr>
		<tr><td style="width:100px;">证件类型</td><td style="width:200px;"><input type="radio" name="cerType" value="7"/>身份证&nbsp;<input type="radio" name="cerType" value="8"/>护照&nbsp;<input type="radio" name="cerType" value="9"/>其他</td></tr>
		<tr><td style="width:100px;">证件号</td><td style="width:200px;"><input type="text" class="o14" /></td></tr>
		<tr><td style="width:100px;">手机或电话</td><td style="width:200px;"><input type="text" class="o15" /></td></tr>
		<tr><td style="width:100px;">保险(20元)</td><td style="width:200px;"><input type="radio" name="needIns" value="1"/>是&nbsp;<input type="radio" name="needIns" value="0"/>否</td></tr>
	</table><br/>
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:0 20px 10px 20px;" id="showAddressBookTbl">
		<tr><td colspan="2">选择配送地址[<a href="javascript:void(0);" onclick="javascript:addAddressBook();">新增</a>]</td></tr>
		<tr><td colspan="2">
			<select style="width:200px;" onchange="javascript:changeAddress();" id="addressBooksList">
				<option value="">请选择</option>
			<%
				List<AddressBooks> addressBooksList = (List<AddressBooks>)request.getAttribute("addressBooksList");
				for(AddressBooks addressbooks:addressBooksList){
			%>
				<option value="<%=addressbooks.getId()%>"><%=addressbooks.getAddress() %></option>
			<%
				}
			%>
			</select>
		</td></tr>
		<tr><td style="width:100px;">地址</td><td style="width:200px;"><span class="a1" /></td></tr>
		<tr><td style="width:100px;">邮编</td><td style="width:200px;"><span class="a2" /></td></tr>
		<tr><td style="width:100px;">收件人</td><td style="width:200px;"><span class="a3" /></td></tr>
		<tr><td style="width:100px;">联系电话</td><td style="width:200px;"><span class="a4" /></td></tr>
	</table>
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:0 20px 10px 20px;display:none;" id="addAddressBookTbl">
		<tr><td style="width:100px;">地址</td><td style="width:200px;"><input type="text" class="_a1" /></td></tr>
		<tr><td style="width:100px;">邮编</td><td style="width:200px;"><input type="text" class="_a2" /></td></tr>
		<tr><td style="width:100px;">收件人</td><td style="width:200px;"><input type="text" class="_a3" /></td></tr>
		<tr><td style="width:100px;">联系电话</td><td style="width:200px;"><input type="text" class="_a4" /></td></tr>
		<tr><td colspan="2"><a href="javascript:void(0);" onclick="javascript:saveAddressBook()">新增</a>&nbsp;&nbsp;<a href="javascript:void(0);" onclick="javascript:cancelSaveAddressBook()">取消新增</a></td></tr>
	</table>
	<input type="button" onclick="javascript:if(confirm('确认订单?')){confirmOrder();}" value="确认" />
</div>
</div>

<div id="loading_div" class="pop dialog" style="height:100px;width:340px;display:none;">
<div class="popHeader"><h1>提示</h1></div>
<div class="popInfo">loading...</div>
</div>

<div id="pay_div" class="pop dialog" style="height:100px;width:340px;display:none;">
<div class="popHeader"><h1>下单成功</h1></div>
<div class="popInfo">下单成功<br/><input type="button" value="立刻支付" onclick="javascript:payOrder();" /></div>
</div>

<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/orderAction.js'></script>
<script type="text/javascript">
	var fromCity='<%=fromCity.getCity3code()%>';
	var toCity='<%=toCity.getCity3code()%>';
	
	var ftbl_item_tpl=$('ftbl_item_tpl');
	var cw_item_tpl=$('cw_item_tpl');
	
	var isTj='${isTj}';
	var viaPort='${viaPort}';
	var jsonRes=eval('(${jsonRes})');
	var orderInfo={};
	var currentPayOrderId;
	
	for(var i=0;i<jsonRes.length;i++){
		var fc=jsonRes[i];
		
		// 是否直飞
		if('1'===viaPort && '0'!==fc.ViaPort){
			continue;
		}
		
		var fcId='fc_'+fc.Carrier+fc.FlightNo;
		var fc_tpl=ftbl_item_tpl.clone();
		fc_tpl.set('id',fcId);
		fc_tpl.getElement('.c2').set('html','<div class="name">'+fc.company+'/<strong>'+fc.Carrier+fc.FlightNo+'</strong></div>'+fc.Aircraft);
		fc_tpl.getElement('.time').set('html','<strong class="time1">'+fc.DepartureTime+'</strong><br/><strong class="time2">'+fc.ArrivalTime+(fc.DepartureDate!=fc.ArrivalDate?'(次日)':'')+'</strong>');
		fc_tpl.getElement('.c4').set('html',fc.fromFly+fc.BoardPointAT_Show+'<br/>'+fc.toFly);
		
		var lowest_price=undefined;
		var lowest_zk=undefined;
		var __showOrderStr=undefined;
		var cws=[];
		var tf=0;
		for(var j=0;j<fc.class.length;j++){
			var cw=fc.class[j];
			
			// 是否特价
			if('1'===isTj && '1'!==cw.isTj){
				continue;
			}
			tf=1;
			
			var a=cw.Price.toFloat();
			var b=cw.zk;
			
			var _showOrderStr='showOrder(\''+fc.FlightNo+'\',\''+fc.DepartureDate+'\',\''+fc.DepartureTime+'\',\''+fc.ArrivalDate+'\',\''+fc.ArrivalTime+'\',\''+fc.Carrier+'\',\''+cw.Code+'\',\''+cw.Price+'\',\''+fc.AirportTax+'\',\''+fc.FuelSurTax+'\',\''+cw.isTj+'\',\''+cw.tjId+'\',\''+cw.CheckKey+'\')';
			cws.push('<tr><td style="width:70px;">'+cw.Code_Show+'</td><td style="width:130px;">¥'+a+'('+b+'折)</td><td style="width:100px;text-align:right;"><a href="javascript:void(0);" onclick="javascript:'+_showOrderStr+';">预订</a></td></tr>');
			
			if(lowest_price===undefined||lowest_price>a){
				lowest_price=a;
				lowest_zk=b;
				__showOrderStr=_showOrderStr;
			}
		}
		
		if(tf===0){
			continue;
		}
		
		var cw_tpl=cw_item_tpl.clone();
		cw_tpl.getElement('.popInfo').getChildren()[0].set('html',cws.join(''));
		var cwId=fcId+'_cw';
		cw_tpl.setStyle('height',(60+fc.class.length*24)+'px');
		cw_tpl.set('id',cwId);
		cw_tpl.inject(cw_item_tpl,'after');
		
		fc_tpl.getElement('.m4').set('html','<span class="pr">¥<b>'+lowest_price+'</b></span>&nbsp;<span class="dc">'+lowest_zk+'折</span><br/><a href="javascript:void(0);" onclick="javascript:showPopDiv(\''+cwId+'\');">所有价格</a>');
		fc_tpl.getElements('.flightsearch')[0].set('ref',__showOrderStr);
		fc_tpl.getElements('.flightsearch')[0].addEvent('click',function(){eval(this.get('ref'));});
		fc_tpl.setStyle('display','block');
		fc_tpl.inject($('hdivResultPanel'),'bottom');
	}
	
	var showOrder=function(flightNo,departureDate,departureTime,arrivalDate,arrivalTime,carrier,code,price,airportTax,fuelSurTax,isTj,tjId,checkKey){
		//orderInfo
		orderInfo.flightNo=flightNo;
		orderInfo.departureDate=departureDate;
		orderInfo.departureTime=departureTime;
		orderInfo.arrivalDate=arrivalDate;
		orderInfo.arrivalTime=arrivalTime;
		orderInfo.carrier=carrier;
		orderInfo.code=code;
		orderInfo.isTj=isTj;
		orderInfo.tjId=tjId;
		orderInfo.checkKey=checkKey;
		
		hiddenPopDiv();
		showPopDiv('loading_div');
		
		orderAction.confirmPAT(fromCity, toCity, flightNo, departureDate, carrier, code, price, isTj, tjId, checkKey, function(res){
			if(res){
				res=res.split('|');
				orderInfo.price=res[0];
				orderInfo.airportTax=res[1];
				orderInfo.fuelSurTax=res[2];
				
				// $('orderInfo')
				$('orderInfo').getElement('.o1').set('html',fromCity);
				$('orderInfo').getElement('.o2').set('html',toCity);
				$('orderInfo').getElement('.o3').set('html',departureDate+' '+departureTime);
				$('orderInfo').getElement('.o4').set('html',arrivalDate+' '+arrivalTime);
				$('orderInfo').getElement('.o5').set('html',carrier+' '+flightNo);
				$('orderInfo').getElement('.o6').set('html',codeCn(code));
				$('orderInfo').getElement('.o7').set('html','<span class="pr">¥<b>'+res[0]);
				$('orderInfo').getElement('.o8').set('html','<span class="pr">¥<b>'+res[1]);
				$('orderInfo').getElement('.o9').set('html','<span class="pr">¥<b>'+res[2]);
				$('orderInfo').getElement('.o10').set('html','<span class="pr">¥<b>'+res[3]);
				
				hiddenPopDiv();
				showPopDiv('orderInfo');
			}
		});
	};
	
	var confirmOrder=function(){
		//拼乘机人
		var o11=formatStr($('orderInfo').getElement('.o11').get('value'));
		if(o11===''){
			alert('请填写正确姓名');
			return;
		}
		
		var cret=$('orderInfo').getElement('input[name="cret"]:checked');
		if(!cret){
			alert('请选择成人/儿童');
			return;
		}
		cret=cret.get('value');
		
		var cerType=$('orderInfo').getElement('input[name="cerType"]:checked');
		if(!cerType){
			alert('请选择证件类型');
			return;
		}
		cerType=cerType.get('value');
		
		var o14=formatStr($('orderInfo').getElement('.o14').get('value'));
		if(o14===''){
			alert('请填写正确证件号');
			return;
		}
		
		var o15=$('orderInfo').getElement('.o15').get('value');
		if(o15===''){
			alert('请填写正确手机或电话');
			return;
		}
		
		var needIns=$('orderInfo').getElement('input[name="needIns"]:checked');
		if(!needIns){
			alert('请选择是否保险');
			return;
		}
		needIns=needIns.get('value');
		
		var peopleStr=o11+'_'+o14+'_'+o15+'_'+cret+'_'+cerType+'_'+needIns;
		
		var adid=$('addressBooksList').getElement('option:selected').get('value');
		if(!adid){
			alert('请选择配送地址');
			return;
		}
		
		hiddenPopDiv();
		showPopDiv('loading_div');
		//orderInfo
		orderAction.confirmOrder(fromCity, toCity, orderInfo.flightNo, orderInfo.departureDate, orderInfo.departureTime, orderInfo.arrivalDate, orderInfo.arrivalTime, orderInfo.carrier, orderInfo.code, orderInfo.price, orderInfo.airportTax, orderInfo.fuelSurTax, orderInfo.isTj, orderInfo.tjId, orderInfo.checkKey, peopleStr, adid, function(res){
			if(res){
				hiddenPopDiv();
				currentPayOrderId=res;
				showPopDiv('pay_div');
			}
		});
	};
	
	var payOrder=function(){
		alert(currentPayOrderId);
		// 支付页面
		// window.location.href='';
	}
	
	var formatStr=function(s){
		return s.trim().replace(/_|<|>/g,'');
	};
	
	var codeCn=function(e){
		if('X'===e){
			return '特价舱';
		}else if('Y'===e){
			return '标准舱';
		}else if('F'===e){
			return '头等舱';
		}else{
			return '标准舱';
		}
	};
	
	var filterTime=function(){
		var a=[];
		$$('input[name="filterTime"]:checked').each(function(e){
			a.push(e.value.split(','));
		});
		
		$$('table[id^=fc_]').each(function(e){
			var b=e.getElement('.time1').get('html').split(':')[0];
			var tf=0;
			for(var i=0;i<a.length;i++){
				if(b>=a[i][0]&&b<=a[i][1]){
					tf=1;
					break;
				}
			}
			e.setStyle('display',tf?'block':'none');
		});
	};
	
	var addAddressBook=function(){
		$('showAddressBookTbl').setStyle('display','none');
		
		$('addAddressBookTbl').getElement('._a1').set('value','');
		$('addAddressBookTbl').getElement('._a2').set('value','');
		$('addAddressBookTbl').getElement('._a3').set('value','');
		$('addAddressBookTbl').getElement('._a4').set('value','');
		$('addAddressBookTbl').setStyle('display','block');
	}
	
	var cancelSaveAddressBook=function(){
		$('addAddressBookTbl').setStyle('display','none');
		$('showAddressBookTbl').setStyle('display','block');
	}
	
	var saveAddressBook=function(){
		var address=$('addAddressBookTbl').getElement('._a1').get('value').trim();
		var zipcode=$('addAddressBookTbl').getElement('._a2').get('value').trim();
		var consignee=$('addAddressBookTbl').getElement('._a3').get('value').trim();
		var phone=$('addAddressBookTbl').getElement('._a4').get('value').trim();
		
		if(address===''||zipcode===''||consignee===''||phone===''){
			alert('请填写完整配送地址');
			return;
		}
		
		orderAction.saveAddressBook(address,zipcode,consignee,phone, function(res){
			if(res){
				$('addAddressBookTbl').setStyle('display','none');
				
				var o=new Element('option',{value:res,html:address});
				$('addressBooksList').adopt(o);
				$('addressBooksList').getChildren().each(function(e){
					e.selected='';
				});
				o.selected='selected';
				$('showAddressBookTbl').getElement('.a1').set('html',address);
				$('showAddressBookTbl').getElement('.a2').set('html',zipcode);
				$('showAddressBookTbl').getElement('.a3').set('html',consignee);
				$('showAddressBookTbl').getElement('.a4').set('html',phone);
				
				$('showAddressBookTbl').setStyle('display','block');
			}
		});
	};
	
	var changeAddress=function(){
		var adid=$('addressBooksList').getElement('option:selected').get('value');
		if(adid){
			orderAction.queryAddressBookById(adid,function(res){
				res=eval('('+res+')');
				$('showAddressBookTbl').getElement('.a1').set('html',res.address);
				$('showAddressBookTbl').getElement('.a2').set('html',res.zipcode);
				$('showAddressBookTbl').getElement('.a3').set('html',res.consignee);
				$('showAddressBookTbl').getElement('.a4').set('html',res.phone);
			});
		}else{
			$('showAddressBookTbl').getElement('.a1').set('html','');
			$('showAddressBookTbl').getElement('.a2').set('html','');
			$('showAddressBookTbl').getElement('.a3').set('html','');
			$('showAddressBookTbl').getElement('.a4').set('html','');
		}
	};
</script>
</body>
</html>